<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            color:black;
        }

        .content {
            width: 100%;
        }

        .top img {
            width: 100%;
            height: 46.2963vw;
            margin-top: -0.9259vw;
        }

        .top {
            margin-top: -1 .463vw;
        }

        .hot {
            margin: 2.7778vw 0;
            overflow: hidden;
        }

        img {
            width: 18.5185vw;
            height: 18.5185vw;
        }

        .img {
            position: relative;
            width: 18.5185vw;
            float: left;
            margin-left: 4.6296vw;
            margin-top: 4.6296vw;
        }

        .name,
        .artist {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        h3 {
            margin-left: 0.463vw;
            padding-bottom: 0.9259vw;
            border-bottom: 0.2778vw solid #C20C0C;
        }

        .new {
            clear: both;
            margin-bottom: 138.8889vw;
        }

        .playcount {
            position: absolute;
            top: 13.963vw;
            left: 0;
            text-align: center;
            width: 18.5185vw;
            height: 4.7778vw;
            color: white;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .content p {
            color: white;
            text-align: center;

        }

        .content .p1 {
            line-height: 9.2593vw;
            background-color: black;
        }

        .content .p2 {
            margin-top: -1.463vw;
            line-height: 7.4074vw;
            background-color: #C20C0C;
        }

        .content span {
            display: inline-block;
            text-align: center;
        }

        .p1 span {
            padding: 0 1.9259vw;
        }

        .p2 span {
            padding: 0 2.9259vw;
        }

        p {
            font-size: 1.1111vw;
        }

        .header {
            display: flex;
            margin: 4.6296vw 0;
        }

        .search {
            width: 46.2963vw;
            height: 8.2593vw;
            position: relative;
            border: 0.463vw solid gainsboro;
            float: left;
            border-radius: 1.8519vw;
            overflow: hidden;

        }

        input {
            width: 44.2963vw;
            height: 8.2593vw;
            position: absolute;
            top: 0;
            left: 0;
            outline: none;
            border: none;
            padding-left: 1.8519vw;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>网易云音乐</h2>
        <div class="search">
            <input type="text" placeholder="音乐/视频/电台/用户" id="input">
        </div>
    </div>

    <div class="content">
        <p class="p1">
            <span>发现音乐</span>
            <span>我的音乐</span>
            <span>朋友</span>
            <span>商城</span>
            <span>音乐人</span>
            <span>下载客户端</span>
        </p>
        <p class="p2">
            <span>推荐</span>
            <span>排行榜</span>
            <span>歌单</span>
            <span>主播电台</span>
            <span>歌手</span>
            <span>新碟上架</span>
        </p>
    </div>
    <div class="hot">
        <h3>热门推荐</h3>
    </div>
    <div class="new">
        <h3>新碟上架</h3>
    </div>
    <script>
        var url = "http://localhost:8080/music";
        $.ajax({
            url,
            type: "get",
            success: res => {
                console.log(res);
                var html = `
                <div class="top">
                    <img src=${res.primary.banner}>
                </div>
                `
                $(".content").append(html)
                res.primary.hot.forEach(item => {
                    var html = `
                    <a href="detail.html?id=${item.id}">
                        <div class="img">
                        <img src=${item.coverImage}>
                        <p class="playcount">${item.playCount}</p>
                        <p class="name">${item.name}</p>     
                    </div>
                    </a>
                `
                    $(".hot").append(html)
                })
                res.primary.newCD.forEach(item => {
                    var html = `
                    <div class="img">
                        <img src=${item.cdImg}>
                        <p class="name">${item.cdName}</p>
                        <p class="artist">${item.csSinger}</p>
                    </div>
                `
                    $(".new").append(html)
                })
            }
        })
        window.onload=function(){
        var input = document.getElementById("input");
        input.onkeydown = function (event) {
            if (event.keyCode == 13) {
                location.href = `http://localhost:8000/search?s=${s}`;
                // console.log("hahahah");
            } 
        }
    }

    </script>
</body>

</html>